<template>
	<view :style="{ height: windowHeight + 'px' }">
		<view class="details-head">
			<uni-nav-bar leftWidth="140px" right-width="140px" height="55px">
				<div slot='left' class="left" style="display: flex;align-items: center;">
					<span class="iconfont" @click="onreturnPuas">&#xe60a;</span>
					<image style="width: 65rpx;height: 65rpx;border-radius: 50%;margin: 0 10rpx;"
						:src="$globalUrl+option.avatarUrl" mode=""></image>
					{{option.userName}}
				</div>
				<div slot="right">
					<button style="height: 50rpx; width: 100rpx;font-size: 20rpx;border-radius: 25px;background-color: firebrick;" @click="onClickfollow(option)">关注</button>
				</div>
			</uni-nav-bar>
		</view>
		<scroll-view scroll-y="true" :style="{ height: windowHeight-100 + 'px' }" class="popular-card-scroll">
			<view class="top-details">
				<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem
					:info="option.postsImags == 1 ? null: option.postsImags" :current="current" mode="default"
					field="content">
					<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
						<swiper-item v-for="(item, index) in option.postsImags" :key="index">
							<view class="swiper-item" :class="'swiper-item' + index">
								<image class="image" style="border-radius: 25px;" :src="$globalUrl+item"></image>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
				<view style="width: 95%;
				border-radius: 25px 25px 0 0;
				margin: 40rpx auto;
				background-color: white;
				">
					<h4 style="margin: 10px;">{{option.postsArticletitle}}</h4>
					<text style="margin: 10px;">
						{{option.postsContent}}
					</text>
				</view>
			</view>
			<!-- 评论区 -->
			<view class="header-details" v-for="(item,index) in commentList" :key="index"> 	
				<view class="header-top">
					<view class="header-detailsfro" @click.stop="clickdetails(item,1)">
						<view class="header-father">
							<view class="details-profilepicture">
								<image :src="$globalUrl+item.avatarUrl" mode="aspectFill">
								</image>
							</view>
							<view class="details-left">
								<view class="details">
									<view class="user-name">
										{{item.userName}}
									</view>
									<view class="user-context">
										{{item.content}}
									</view>
								</view>
							</view>
						</view>
						<view class="select-picker-icon">
							<view class="card-actions-item details-actions" style="" @click="liekClick()">
								<span v-if="option.likeState==1" style="font-size: 20px;"
									class="iconfont">&#xe85c;</span>
								<uni-icons type="heart" size="20" color="#999" v-else></uni-icons>
								<text v-show="item.likecontext != 0">{{item.likecontext}}</text>
							</view>
						</view>
					</view>
					<view class="date-header1">
						{{item.Howmanyhoursago}}
					</view>
				</view>
				<view v-if="childindex < item.showmorechildindex" class="header-childfor"
					v-for="(childitem,childindex) in item.childComment" :ket="childindex">
					<view class="header-child" @click.stop="clickdetails(childitem,2)">
						<view class="chiader-top">
							<view class="details-replyContent">
								<view class="details-profilepicture">
									<image :src="$globalUrl+childitem.avatarUrl"
										mode="aspectFill">
									</image>
								</view>
								<view class="details-left">
									<view class="details">
										<view class="user-name">
											{{childitem.userName}} <span
												v-if="childitem.replyName != null && childitem.replyName != ''">回复{{childitem.replyName}}</span>
										</view>
										<view class="user-context">
											{{childitem.replyContent}}
										</view>
									</view>
								</view>
							</view>
							<view class="select-picker-icon">
								<view class="card-actions-item details-actions" style="" @click="liekClick()">
									<span v-if="option.likeState==1" style="font-size: 20px;"
										class="iconfont">&#xe85c;</span>
									<uni-icons type="heart" size="20" color="#999" v-else></uni-icons>
									<text v-show="childitem.likecontext != 0">{{childitem.likecontext}}</text>
								</view>
							</view>
						</view>
						<view class="date-header2">
							{{childitem.Howmanyhoursago}}
						</view>
					</view>
				</view>
				<transition>
					<view v-if="item.childComment.length >= item.showmorechildindex && item.childComment.length != 1" class="showmore">
						<span class="showmorespan"
							@click="onclickshowmore(item)">显示更多{{item.childComment.length-item.showmorechildindex}}</span>
					</view>
					<view
						v-else-if="item.childComment.length == item.showmorechildindex-1 && item.childComment.length != 0"
						class="showmore">
						<span class="showmorespan" @click="item.showmorechildindex = 1">收起更多</span>
					</view>
				</transition>
			</view>
		</scroll-view>
		<!--底部栏 -->

		<view :class="Maskifo" @click="onMaskifo()"></view>
		<view class="buttom-details">
			{{username}}
			<!-- 模拟输入框 -->
			<input :focus="Focus" @click="openFocus" v-model="detailsinput" class="buttom-input" ref="detailsinput"
				type="text">
			<!-- 背景文字 -->
			<span v-show="!detailsinput != ''" class="back-text">{{userName == ""? "说点什么....." : '回复'+userName}}</span>
			<view style="margin-right: 30rpx;display: flex;">
				<!-- 点赞图标 -->
				<view class="card-actions-item" style="" @click="liekpostClick()">
					<span v-if="option.likeState==1" style="font-size: 20px;" class="iconfont">&#xe85c;</span>
					<uni-icons type="heart" size="20" color="#999" v-else></uni-icons>
				</view>
				<!-- 发送评论 -->
				<button @click="sunbmtcomment" class="isinputbutton" v-show="detailsinput != ''">发送</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex' //引入mapState
	import {
		inertlikestate,
		cancellation
	} from '@/api/likestateApi.js'
	import {
		commentAll,
		addcomment
	} from '@/api/comment.js'
	import store from '@/store/index.js'
	export default {
		data() {
			return {
				windowHeight: uni.getSystemInfoSync().windowHeight,
				//详细内容
				option: {},
				modeIndex: -1,
				styleIndex: -1,
				current: 0,
				swiperDotIndex: 0,
				// 评论数据
				commentList: [],
				detailsinput: "",
				focusState: false,
				commentState: 0,
				fatherUserId: 0,
				//点击控制获取焦点
				Focus: false,
				//是否开启遮罩层
				Maskifo: '',
				//构建表单数据
				commentdata: {
					//父级评论id
					id: 0,
					/* 发表人id */
					commentUserId: 0,
					/* 帖子id */
					postsId: 0,
					/* 发表内容 */
					content: "",
					/*当前回复人id */
					replyUserId: 0,
					//回复内容
					replyContent: "",
					//回复谁
					replyName: "",
					index: 0
				},
				userName: '',
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			let article = JSON.parse(option.article)
			this.option = article
			this.option.postsImags = article.postsImags.split(",")
			console.log(article)
			this.initialization()

		},
		methods: {
			async initialization() {
				const {
					data
				} = await commentAll(this.option.id);
				console.log(data)
				for (var i = 0; i < data.data.length; i++) {
					data.data[i].showmorechildindex = 1
					data.data[i].Howmanyhoursago = this.timeAgo(data.data[i].creationTime)
					for (var j = 0; j < data.data[i].childComment.length; j++) {
						data.data[i].childComment[j].Howmanyhoursago = this.timeAgo(data.data[i].childComment[j]
							.creationTime)
					}
				}
				this.commentList = data.data
			},
			change(e) {
				this.current = e.detail.current
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			//点赞
			liekpostClick() {
				if (item.likeState == 1) {
					item.postsLikecount = parseInt(item.postsLikecount) - 1
					item.likeState = 0
					cancellation(item)
				} else {
					item.postsLikecount = parseInt(item.postsLikecount) + 1
					item.likeState = 1
					inertlikestate(item)
				}
			},
			// 发表评论
			clickdetails(item, index) {
				console.log("发表评论")
				console.log(item.commentId)
				//获取评论焦点
				this.Focus = true
				//开启遮罩层
				this.Maskifo = 'Mask'
				//构建数据
				this.userName = item.userName
				this.commentdata = item
				this.commentdata.index = index
			},
			//添加评论
			async sunbmtcomment() {
				if (this.commentdata.index == 0) {
					/* 帖子id */
					this.commentdata.postsId = this.option.id
					/* 发表内容 */
					this.commentdata.content = this.detailsinput
				} else {
					this.commentdata.postsId = 0
				}
				if (this.commentdata.index == 1) {
					this.commentdata.replyName = ''
					this.commentdata.replyContent = this.detailsinput
				} else if (this.commentdata.index == 2) {
					this.commentdata.replyName = this.commentdata.userName
					this.commentdata.id = this.commentdata.commentId
					this.commentdata.replyContent = this.detailsinput
				}
				console.log("index====>", this.commentdata)
				const {
					data
				} = addcomment(this.commentdata);
				console.log(data)
				 this.initialization()
				this.Maskifo = ''
				this.commentdata.index = 0 
				item.showmorechildindex += 2
				this.detailsinput = ""
				this.userName = ""
				this.onclickshowmore()
			},
			openFocus() {
				this.Maskifo = 'Mask'
			},
			//关闭遮罩层
			onMaskifo() {
				this.Maskifo = ''
				this.userName = ""
			},
			//显示更多
			onclickshowmore(item) {
				item.showmorechildindex += 2
			},
			//返回
			onreturnPuas() {
				uni.reLaunch({
					url: '/pages/index/index',
				});
			},
			timeAgo(dateTimeStamp) {
				var result
				var time = new Date(dateTimeStamp).getTime()
				var nowTime = new Date().getTime()
				var timeDifference = nowTime - time+60000

				var minTime = 60000
				var hourTime = minTime * 60
				var dayTime = hourTime * 24
				var weektTime = dayTime * 7
				var monthTime = dayTime * 30
				var yearTime = dayTime * 365
				if (parseInt(timeDifference / yearTime) >= 1) {
					result = parseInt(timeDifference / yearTime) + "年前"
				} else if (parseInt(timeDifference / monthTime) >= 1) {
					result = parseInt(timeDifference / monthTime) + "月前"
				} else if (parseInt(timeDifference / weektTime) >= 1) {
					result = parseInt(timeDifference / weektTime) + "周前"
				} else if (parseInt(timeDifference / dayTime) >= 1) {
					result = parseInt(timeDifference / dayTime) + "天前"
				} else if (parseInt(timeDifference / hourTime) >= 1) {
					result = parseInt(timeDifference / hourTime) + "小时前"
				} else if (parseInt(timeDifference / minTime) >= 1) {
					if(parseInt(timeDifference / minTime) != 5) { //五分钟内就是刚刚
					  result = "刚刚"
					}else {
						result = parseInt(timeDifference / minTime) + "分钟前"
					}
				} 
				return result;
			},
			/* 
				关注列表 
			*/
			onClickfollow(value){
				console.log(value.postsUserid)
			}
			/* computed: mapState({
				// 从state中拿到数据 箭头函数可使代码更简练
				username: state => state.username,
				avatarUrl: state => state.av	atarUrl,
				backgroundImage: state => state.backgroundImage,
			}) */
		}
	}
</script>

<style lang="scss">
	.details-head {
		width: 100%;
	}

	/deep/.uni-navbar__header-container {
		display: flex;
		flex: 1;
		padding: 0 10px;
		overflow: hidden;
		justify-content: space-evenly !important;
		align-items: center !important;
	}


	.swiper-box {
		height: 250px;
	}

	.swiper-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.popular-card-scroll {
		box-sizing: border-box;
		width: 100%;
	}

	.image {
		width: 98%;
	}

	.top-details {
		border-bottom: 1px solid #f0f0f0;
		padding-bottom: 20px;
	}

	.buttom-details {
		width: 100%;
		height: 50px;
		border-top: 1px solid white;
		position: absolute;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		opacity: 1;

		.isinputbutton {
			width: 100rpx;
			height: 30px;
			font-size: 20rpx;
			border-radius: 25px;
			background-color: darkred;
		}

		.card-actions-item {
			margin: 10rpx 10rpx;
		}

		.buttom-input {
			padding-left: 10rpx;
			width: 50%;
			height: 30px;
			border: 1px solid #f0f0f0;
			border-radius: 25px;
			line-height: 30px;
			font-size: 20rpx;
			margin-left: 30rpx;
		}

		.back-text {
			position: absolute;
			left: 29px;
			top: 18px;
			font-size: 12px;
			color: #c7c9ce;
		}
	}


	.header-details {
		width: 90%;
		//padding: 10rpx;
		margin: 0 auto;
		display: flex;
		flex-wrap: nowrap;
		flex-direction: column;

		.showmore {
			width: 100%;
			height: 30px;
			display: flex;
			justify-content: flex-end;

			.showmorespan {
				display: inline-block;
				width: 90%;
				padding-left: 82px;
			}
		}

		.header-top {
			width: 100%;
			height: 75px;
			display: flex;
			flex-direction: column;
			border-bottom: 1px solid #eee;
			margin-bottom: 10rpx;

			.header-detailsfro {
				width: 100%;
				height: 75px;
				display: flex;
				justify-content: space-between;

				.header-father {
					display: flex;

					.details-profilepicture image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}

					.details-left {
						margin-left: 20rpx;

						.user-likecontext {
							font-size: 25rpx;
						}
					}
				}
			}
		}





		.header-childfor {
			width: 100%;
			height: 75px;
			display: flex;
			justify-content: flex-end;

			.header-child {
				width: 90%;
				height: 45px;

				.chiader-top {
					width: 100%;
					height: 45px;
					display: flex;
					justify-content: space-between;

					.details-replyContent {
						display: flex;
						align-items: center;

						.details-profilepicture image {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
						}
					}

					.details-left {
						margin-left: 20rpx;

						.user-likecontext {

							font-size: 85rpx;
						}
					}
				}

				.date-header2 {
					padding: 5rpx;
					margin-left: 70rpx;
					border-bottom: 1px solid #eee;
				}
			}
		}
	}


	.Mask {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: silver;
		opacity: 0.5;
	}

	.date-header1 {
		padding-left: 10rpx;
	}
</style>